<template>
  <div class="topic-select">
    <div
      v-for="qts in props.qtsIndexData"
      :key="qts.question_id"
      @click="onSelectQtsBlock(qts)"
    >
      <div
        class="topic-select-item"
        :class="
          singleQtsCorrectStore.currentQtsData.question_id == qts.question_id
            ? 'active-topic'
            : ''
        "
      >
        <div class="topic-order">
          <div
            class="point"
            :class="
              qts.await_grade != 0 && !qts.sub_question_info ? 'red-point' : ''
            "
          ></div>
          {{ qts.order_text }}
        </div>
        <div
          class="topic-correct"
          :class="
            qts.await_grade == 0 && qts.submit_count != 0 ? 'green-color' : ''
          "
          v-if="!qts.sub_question_info"
        >
          {{ correctProgress(qts.question_id) }}
        </div>
      </div>

      <template v-if="qts.sub_question_info">
        <div
          class="topic-select-item sub-item"
          :class="
            singleQtsCorrectStore.currentQtsData.question_id ==
            smallQts.question_id
              ? 'active-topic'
              : ''
          "
          v-for="(smallQts, smallIndex) in qts.sub_question_info"
          :key="smallIndex"
          @click="onSelectQtsBlock(smallQts)"
        >
          <div class="topic-order">
            <div
              class="point"
              :class="smallQts.await_grade != 0 ? 'red-point' : ''"
            ></div>
            {{ smallQts.order_text }}
          </div>
          <div
            class="topic-correct"
            :class="
              smallQts.await_grade == 0 && qts.submit_count != 0
                ? 'green-color'
                : ''
            "
          >
            {{ correctProgress(smallQts.question_id) }}
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { onBeforeUnmount } from 'vue'
import $bus from '@/utils/tools/bus'
import { useSingleQtsCorrectStore } from '@/stores/single-correct'
const singleQtsCorrectStore = useSingleQtsCorrectStore()

const props = defineProps({
  qtsIndexData: { type: Array, default: () => [] }
})

const onSelectQtsBlock = qts => {
  if (qts.sub_question_info) return
  singleQtsCorrectStore.isRemark = false
  singleQtsCorrectStore.currentQtsData = qts
  $bus.emit('on-select-qts')
}

const correctProgress = qtsId => {
  let qts = findQuestionById(qtsId)
  if (qts) {
    return qts.grade_rate == 1
      ? '已完成批改'
      : `已批改${Math.round(qts.grade_rate * 100)}%`
  }
  return ''
}

function findQuestionById(qtsId) {
  let question = props.qtsIndexData.find(item => item.question_id === qtsId)

  if (
    !question &&
    props.qtsIndexData.some(
      item => item.sub_question_info && Array.isArray(item.sub_question_info)
    )
  ) {
    question = props.qtsIndexData
      .flatMap(item => item.sub_question_info || [])
      .find(subItem => subItem.question_id === qtsId)
  }

  return question
}

onBeforeUnmount(async () => {
  $bus.off('on-select-qts')
})
</script>

<style lang="less" scoped>
.topic-select {
  width: 340px;
  height: calc(100vh - 110px);
  overflow: scroll;
  border: 1px solid #dadada;
  margin-top: 16px;
  margin-left: 35px;
  margin-right: -15px;
  padding: 14px 9px;
  cursor: pointer;
  // &::-webkit-scrollbar {
  //   display: none;
  // }
  .active-topic {
    background-color: #ebf5ff;
  }
  .topic-select-item {
    height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    padding-right: 12px;
    padding-left: 4px;

    .topic-order {
      color: #333333;
      display: flex;
      align-items: center;
      .point {
        margin: 0 4px;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background-color: #ebf5ff;
      }
      .red-point {
        background-color: #fd686d;
      }
    }
    .topic-correct {
      color: #fd686d;
    }
    .green-color {
      color: #3ecac9;
    }
  }
  // .sub-item {
  //   margin-left: 17px;
  // }
}
</style>
